import { computed, watch, toRef, nextTick, ref, onMounted } from "vue";
import { useStore } from "vuex";
export default function (lyricbox, objectDistance, lyric) {

  const store = useStore();
  //  获取歌词滚动条的top值
  const slideTop = computed(() => store.state.SongLyric.slideTop);
  let finallyElement = ref(null);
  let MaxH = ref(null);
  const flag = toRef(store.state.SongList, "flag");
  onMounted(() => {
    watch(lyric, () => {
      nextTick(() => {
        MaxH.value = 260 * 219 / (lyricbox.value.children[lyricbox.value.children.length - 1].offsetTop + lyricbox.value.children[lyricbox.value.children.length - 1].offsetHeight);
        finallyElement.value = lyricbox.value.children[lyricbox.value.children.length - 1];
        store.commit("SongLyric/changeSlideTop", 0);
        lyricbox.value.scrollTop = 0;
      })

    })
    watch(flag, (value) => {
      if (value && store.state.SongLyric.lyric !== null) {
        nextTick(() => {
          MaxH.value = 260 * 219 / (lyricbox.value.children[lyricbox.value.children.length - 1].offsetTop + lyricbox.value.children[lyricbox.value.children.length - 1].offsetHeight);
          finallyElement.value = lyricbox.value.children[lyricbox.value.children.length - 1];

        })
      }
    })
  }),


    watch(objectDistance, (value) => {
      store.commit("SongLyric/changeSlideTop", value / (finallyElement.value.offsetTop + finallyElement.value.offsetHeight) * 260)
    })


  //   2. 歌词随着鼠标移动
  //  歌词滚动条最多可以移动的距离
  const maxScrollTop = computed(() => { return ((finallyElement.value.offsetTop + finallyElement.value.offsetHeight) - 219) / (finallyElement.value.offsetTop + finallyElement.value.offsetHeight) * 260 });



  function ScrollBar1(e) {
    //  在FloorSongLst.vue中开启mousemove移动事件;
    store.commit("SongLyric/changeMousemoveFlag", true);
    // 保存按下时,Y轴位置, 通过mousemove移动后的y轴减去 保存时的Y轴就可以得出鼠标移动的距离;
    store.commit("SongLyric/changeClientY", e.clientY);
    //  将滚动条最多可以移动距离传入vuex,避免计算后的top值超过了可被移动的距离;
    store.commit("SongLyric/changeMaxTop", maxScrollTop.value);
    //  停止 歌词随播放时间移动
    store.commit("PlaySong/changPlayingNumberTimeFlag", false);
    const body = document.body;
    body.onmouseup = function () {
      //  在FloorSongLst.vue中关闭mousemove移动事件;
      store.commit("SongLyric/changeMousemoveFlag", false);
      //  开启 歌词随播放时间移动
      store.commit("PlaySong/changPlayingNumberTimeFlag", true);
      body.onmouseup = null;

    }
  }

  //  3. 当歌词滚动条移动时,内容区也同样移动
  //   内容区应该滚动的距离 = 滚动条移动的距离 / 260 * 内容区最大的高度
  const contextMove = toRef(store.state.SongLyric, "contextMove");
  watch(contextMove, (value) => {
    lyricbox.value.scrollTop = value / 260 * (finallyElement.value.offsetTop + finallyElement.value.offsetHeight);
  })

  // 
  //  4. 用鼠标滑轮控制内容区，当内容区滑动时歌词滚动条也移动;

  let setTime = null;
  function contextScroll(e) {
    if (e.wheelDeltaY > 0) {
      lyricbox.value.scrollTop -= 32;
    } else {
      lyricbox.value.scrollTop += 32;
    }
    //  滚动条应该移动的距离 = 内容区移动的距离 / 内容区最大的高度 * 260;
    nextTick(() => {
      store.commit("SongLyric/changeSlideTop", (lyricbox.value.scrollTop) / (finallyElement.value.offsetTop + finallyElement.value.offsetHeight) * 260);
    })

    clearTimeout(setTime);
    //  关闭歌词随播放时间移动
    store.commit("PlaySong/changPlayingNumberTimeFlag", false);
    setTime = setTimeout(() => {
      //  开启歌词随播放时间移动
      store.commit("PlaySong/changPlayingNumberTimeFlag", true);
      clearTimeout(setTime);
      setTime = null;
    }, 1500);
  }

  return {
    MaxH,
    slideTop,
    ScrollBar1,
    contextScroll,

  }
}